<template>
  <div class="le-matter">
    <el-button
      class="le-publish-btn"
      type="primary"
      @click="router('/goods/publish')"
      >发布商品</el-button
    >
    <div class="le-card le-search">
      <div class="flex flex-wrap">
        <div class="le-item flex">
          <div class="le-item__label">商品搜索</div>
          <div class="le-item__value">
            <el-input
              class="le-left__input"
              v-model="keyword.search"
              @keyup.enter.native="getSearch"
              @clear="getSearch"
              clearable
              placeholder="输入商品名称/货号/ID搜索"
            ></el-input>
          </div>
        </div>
        <div class="le-item flex">
          <div class="le-item__label">商品价格</div>
          <div class="le-item__value">
            <el-input
              class="le-right__input"
              @keyup.enter.native="getSearch"
              @clear="getSearch"
              clearable
              @keyup.native="keyword.price_start = oninput(keyword.price_start)"
              v-model="keyword.price_start"
              placeholder="最低价格"
            >
              <template slot="append">元</template>
            </el-input>
            <span class="le-go">至</span>
            <el-input
              class="le-right__input"
              v-model="keyword.price_end"
              clearable
              @keyup.native="keyword.price_end = oninput(keyword.price_end)"
              @keyup.enter.native="getSearch"
              @clear="getSearch"
              placeholder="最高价格"
            >
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
        <div class="le-item flex">
          <div class="le-item__label">商品分类</div>
          <div class="le-item__value">
            <div
              class="le-group-input flex justify-between align-center"
              id="searchGroup"
              action="openGroup"
              v-popup.chooseCategory="catObject"
              title="选择分类"
              width="801"
              module="goods"
            >
              <div class="he-select__content">
                <div class="le-placeholder" v-if="keyword.group.length === 0">
                  请选择
                </div>
                <div
                  class="he-select__tag"
                  v-for="(item, index) in keyword.group"
                  :key="index"
                >
                  <span>{{ item.value }}</span>
                  <i
                    class="el-tag__close el-icon-close"
                    @click.stop="delGroup(item, index)"
                  ></i>
                </div>
              </div>
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div class="le-item flex">
          <div class="le-item__label">创建时间</div>
          <div class="le-item__value">
            <el-date-picker
              class="le-date__input"
              @change="getSearch"
              v-model="time_start"
              type="datetime"
              placeholder="开始时间"
            >
            </el-date-picker>
            <span class="le-go">至</span>
            <el-date-picker
              class="le-date__input"
              @change="getSearch"
              v-model="time_end"
              type="datetime"
              placeholder="结束时间"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="le-button">
        <el-button @click="getSearch" type="primary">筛选</el-button>
        <el-button @click="empty">清空</el-button>
        <popconfirm
          @confirm="exportGoods"
          width="328px"
          title="确认导出选中商品信息？"
        >
          <el-button>导出</el-button>
        </popconfirm>
        <el-button type="text" @click="router('/goods/goodsExportHistory')"
          >导出历史</el-button
        >
      </div>
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      :before-leave="beforeLeave"
      class="le-tabs"
    >
      <el-tab-pane :label="`全部(${tabCount.all})`" name="all">
        <goodsAll
          :tab_key="keyword.tab_key"
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="all"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          @count="getCount"
          v-if="keyword.tab_key == 'all'"
        />
      </el-tab-pane>
      <el-tab-pane :label="`销售中(${tabCount.onsale})`" name="onsale">
        <goodsAll
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="onsale"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          :tab_key="keyword.tab_key"
          @count="getCount"
          v-if="keyword.tab_key == 'onsale'"
        />
      </el-tab-pane>
      <el-tab-pane :label="`下架中(${tabCount.nosale})`" name="nosale">
        <goodsAll
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="nosale"
          :tab_key="keyword.tab_key"
          @count="getCount"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          v-if="keyword.tab_key == 'nosale'"
        />
      </el-tab-pane>
      <el-tab-pane :label="`售罄(${tabCount.soldout})`" name="soldout">
        <goodsAll
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="soldout"
          :tab_key="keyword.tab_key"
          @count="getCount"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          v-if="keyword.tab_key == 'soldout'"
        />
      </el-tab-pane>
      <el-tab-pane :label="`草稿箱(${tabCount.drafts})`" name="drafts">
        <goodsAll
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="drafts"
          :tab_key="keyword.tab_key"
          @count="getCount"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          v-if="keyword.tab_key == 'drafts'"
        />
      </el-tab-pane>
      <el-tab-pane :label="`回收站(${tabCount.recycle})`" name="recycle">
        <goodsAll
          v-model="list"
          :group="catObject.cat"
          :page="page"
          status="recycle"
          :tab_key="keyword.tab_key"
          @count="getCount"
          @request="getRequest"
          @delete="deleteGoods"
          @selection="selection"
          :loading="tableLoading"
          v-if="keyword.tab_key == 'recycle'"
        />
      </el-tab-pane>
    </el-tabs>
    <heloading
      v-model="load"
      page="goodsExportHistory"
      path="goods"
      @submit="exportGoods"
    ></heloading>
  </div>
</template>
<script type="text/javascript">
import goodsAll from "./components/goodsAll.vue";
import popconfirm from "@/components/popconfirm.vue";
import heloading from "@/components/heloading.vue";
import floatNum from "@/lib/function/floatNum";
import goodsTable from "./components/goodsTable/goodsTable.vue";
export default {
  components: {
    goodsAll,
    popconfirm,
    heloading,
    goodsTable,
  },
  data() {
    return {
      load: {
        show: false,
        type: 1,
      },
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      activeName: "all",
      value1: "",
      value2: "",
      keyword: {
        tab_key: "all", // 全部all  销售中onsale   下架中nosale  售罄soldout  回收站recycle
        search: "",
        group: [],
        price_start: "",
        price_end: "",
        time_start: "",
        time_end: "",
        sort: {},
      },
      time_start: "",
      time_end: "",
      tabCount: {
        all: 0,
        onsale: 0,
        nosale: 0,
        soldout: 0,
        drafts: 0,
        recycle: 0,
      },
      page: {
        size: 20,
        current: 1,
      },
      list: [],
      checkList: [],
      tableLoading: false,
      catObject: {
        returnType: "children",
        cat: [],
        result: [],
      },
    };
  },
  async mounted() {
    this.getList(this.page);
    this.getCount();
    this.getGroup();
  },
  methods: {
    router: function (path) {
      this.$router.push({
        path: path,
      });
    },
    empty() {
      for (let key in this.keyword) {
        if (key === "tab_key") {
          this.keyword[key] = "all";
        } else if (key === "sort") {
          this.keyword[key] = {
            created_time: "DESC",
          };
        } else if (key === "group") {
          this.keyword[key] = [];
        } else {
          this.keyword[key] = "";
        }
      }
      this.time_start = "";
      this.time_end = "";
      this.catObject.result = [];
      this.page.current = 1;
      this.getCount();
      this.getList(this.page);
    },
    getSearch() {
      this.page.current = 1;
      this.keyword.time_start = this.time_start
        ? new Date(this.time_start).getTime().toString().substr(0, 10)
        : "";
      this.keyword.time_end = this.time_end
        ? new Date(this.time_end).getTime().toString().substr(0, 10)
        : "";
      this.getCount();
      this.getList(this.page);
    },
    getRequest(data) {
      let page = data.page ? data.page : { size: 20, current: 1 };
      this.keyword.sort = data.sort ? data.sort : { created_time: "DESC" };
      this.getList(page);
    },
    getList: function (page) {
      this.tableLoading = true;
      let keyword = JSON.parse(JSON.stringify(this.keyword));
      keyword.group = keyword.group.map((v) => {
        return v.id;
      });
      this.$heshop
        .search("post", { include: "goods" }, { keyword })
        .page(page.current, page.size)
        .then((res) => {
          this.tableLoading = false;
          let { data, headers } = res;
          this.list = data.map((v) => {
            v.popover = false;
            return v;
          });
          this.page = {
            current: +headers["x-pagination-current-page"],
            count: +headers["x-pagination-page-count"],
            size: +headers["x-pagination-per-page"],
            total: +headers["x-pagination-total-count"],
          };
          this.tabCount[this.activeName] = this.page.total;
        })
        .catch((err) => {
          this.tableLoading = false;
          console.error(err);
        });
    },
    tableClick: function (e) {},
    deleteGoods: function (id) {
      this.$heshop
        .goods("delete", id)
        .then(() => {
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].id === id) {
              this.$delete(this.list, i);
              if (this.page.current < this.page.count) {
                this.getList(this.page);
              } else if (
                this.page.current === this.page.count &&
                this.list.length === 0
              ) {
                this.page.current--;
                this.getList(this.page);
              }
              break;
            }
          }
          this.$message.success("删除成功");
        })
        .catch((err) => {
          this.$message.error(err.data.message);
        });
    },
    getCount: function () {
      let keyword = JSON.parse(JSON.stringify(this.keyword));
      keyword.group = keyword.group.map((v) => {
        return v.id;
      });
      this.$heshop
        .tabcount("post", { include: "goods" }, { keyword })
        .then((res) => {
          this.tabCount = res;
        })
        .catch((err) => {
          this.$message.error(err.data.message);
        });
    },
    getGroup() {
      this.$heshop
        .group("get", { include: "goods" })
        .then((res) => {
          this.$set(this.catObject, "cat", res);
          // this.catObject.cat = res;
        })
        .catch((err) => {
          this.$message.error(err.data.message);
        });
    },
    selection: function (e) {
      this.checkList = e;
    },
    exportGoods: function () {
      this.load = {
        show: true,
        type: 1,
      };
      this.keyword.time_start = this.time_start
        ? new Date(this.time_start).getTime().toString().substr(0, 10)
        : "";
      this.keyword.time_end = this.time_end
        ? new Date(this.time_end).getTime().toString().substr(0, 10)
        : "";
      let conditions = this.keyword;
      this.$heshop
        .export(
          "post",
          { include: "goods" },
          {
            conditions: conditions,
            id_list: this.checkList,
          }
        )
        .then(() => {
          this.$set(this.load, "type", 2);
        })
        .catch((error) => {
          this.$set(this.load, "type", 3);
        });
    },
    openGroup: function (e) {
      this.keyword.group = e.result;
      this.catObject.result = e.result;
      this.getSearch();
    },
    delGroup: function (item, index) {
      let path = item.path.split("-").map(Number);
      let level = path.length;
      if (level === 3) {
        let p_deleted = false; //父级是否被删除,保证每次只删除一个
        let p2_deleted = false; //父父级是否被删除,保证每次只删除一个
        let result = this.catObject.result;
        for (let i = 0; i < result.length; i++) {
          if (result[i].id === path[1]) {
            if (!p2_deleted) {
              p2_deleted = true;
              this.catObject.result.splice(i, 1);
            }
            for (let j = 0; j < result.length; j++) {
              if (result[j].id === path[2]) {
                if (!p_deleted) {
                  p_deleted = true;
                  this.catObject.result.splice(j, 1);
                }
              }
            }
          }
        }
      } else if (level === 2) {
        let p_deleted = false;
        this.catObject.result.forEach((v, k) => {
          if (v.id === path[1]) {
            if (!p_deleted) {
              p_deleted = true;
              this.catObject.result.splice(k, 1);
            }
          }
        });
      }
      this.$delete(this.keyword.group, index);
      this.getSearch();
    },
    oninput: function (value) {
      return floatNum(value);
    },
    beforeLeave: function (activeName, oldActiveName) {
      if (activeName === oldActiveName) {
        return false;
      } else {
        this.page = {
          size: 20,
          current: 1,
        };
        this.keyword.tab_key = activeName;
        this.getList(this.page);
        return true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./goods.less";
</style>